
<template>
  <BaseDialog :showDialog.sync="dialogVisible" v-bind="$attrs" @confirm="confirm">
    <template slot="content" class="content">
      <div class="input-wrapper">
        <el-input type="text" @change="isWhite = true" v-model="address" class="reset-input" placeholder="Please fill in your address (BEP20)" disabled></el-input>
      </div>
      <p class="error" v-if="!isWhite">Your address isn’t in the whitelist</p>
    </template>
  </BaseDialog>
</template>

<script>
import BaseDialog from '@/components/dialog/Index';
import { chainIdMap } from '@/utils/constants';
import contract from '@/config/contract';
import { mapMutations, mapState } from 'vuex';
import { isWhitelisted, checkChain } from '@/utils';

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: () => false,
    },
  },
  components: {
    BaseDialog,
  },
  computed: {
    ...mapState(['chainId']),
    dialogVisible: {
      get() {
        return this.showDialog;
      },
      set(val) {
        this.$emit('update:showDialog', val);
      },
    },
    isCurrentNet() {
      return this.chainId === chainIdMap['BSC'];
    },
  },
  data() {
    return {
      address: '',
      isWhite: true,
    };
  },
  methods: {
    ...mapMutations(['updateCurrentAddress']),
    async confirm() {
      if (!this.isCurrentNet) {
        await this.changeNet();
        this.dialogVisible = false;
      } else {
        const isWhite = await isWhitelisted(contract.presale.abi, contract.presale.address, this.address);
        if (!isWhite) {
          this.isWhite = false;
          return;
        }
        sessionStorage.setItem('address', this.address);
        this.updateCurrentAddress(this.address);
        this.$router.push('/swap/index');
      }
    },
    async changeNet() {
      await checkChain({ target: 'BSC' });
    },
  },
  created() {
    this.address = sessionStorage.getItem('address');
  },
};
</script>

<style lang="scss" scoped>
@import '@/style/variable.scss';

.input-wrapper{
  background: $theme;
  border: 2px solid #000;
  border-radius: 20px;
  height: 50px;
  margin-bottom: 10px;

  .reset-input{
    margin-top: 6px;

  }
  ::v-deep .el-input__inner{
    font-family: medium;
   color: rgba(255, 255, 255, 0.5) !important;
  }

}
.error{
  font-weight: bold;
  font-size: 14px;
  color: #EF7574;
  margin: 20px 0 10px 0;
}
</style>
